<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>试卷详情</title>
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .question-list li {
            margin-bottom: 10px;
        }
        .title-header {
            font-weight: bold;
            color: #009688;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <h2 class="layui-text">试卷详情</h2>
    <blockquote class="layui-elem-quote" id="examInfo"></blockquote>

    <div class="layui-collapse" lay-accordion id="questionCollapse">
        <!-- 动态插入题目内容 -->
    </div>
</div>

<script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 获取 URL 参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        const paperId = getQueryParam("paperId");

        if (!paperId) {
            layer.msg("缺少考试试卷号参数！");
            return;
        }


        axios.get(`/paper/` + paperId).then(res => {
            console.log("接口返回：", res);

            if (res.status === 200 && res.data) {
                const topic = res.data;
                let html = '';
                const typeMap = {
                    1: '选择题',
                    2: '填空题',
                    3: '判断题'
                };

                Object.keys(typeMap).forEach(type => {
                    const list = topic[type] || [];
                    html += `
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">${typeMap[type]}（共 ${list.length} 题）</h2>
                    <div class="layui-colla-content layui-show">
                        <ul class="question-list">
                            ${list.map((q, i) => `
                                <li>
                                    ${i + 1}. ${q.question}
                                    <span style="color: #999">(${q.score}分)</span>
                                    <a href="#" style="color: red" onclick="deleteQuestion(${type}, ${q.questionId}); return false;">删除</a>
                                </li>
                            `).join('')}
                        </ul>
                    </div>
                </div>`;
                });

                $('#questionCollapse').html(html);
                layui.element.render('collapse');
            } else {
                layer.msg("题目加载失败: " + (res.data?.msg || "无返回数据"));
            }
        }).catch(err => {
            console.error("请求失败：", err);
            layer.msg("加载失败，服务器无响应或接口错误");
        });



        // 删除题目函数
        window.deleteQuestion = function(type, questionId) {
            layer.confirm("确认删除该题？", function(index) {
                axios.get(`/paper/delete/${paperId}/${type}/${questionId}`)
                    .then(res => {
                        if (res.data.code === 200) {
                            layer.msg("删除成功");
                            location.reload(); // 重新加载页面
                        } else {
                            layer.msg("删除失败：" + (res.data.msg || "未知错误"));
                        }
                    })
                    .catch(err => {
                        console.error("删除请求失败：", err);
                        layer.msg("请求失败，请检查网络或后端接口");
                    });
                layer.close(index);
            });
        }

    });
</script>
</body>
</html>
